<template>
  <div id="screen">
    <!-- 筛选 -->
    <van-dropdown-menu active-color="#1779ff">
      <van-dropdown-item :title="tit" ref="ref1">
        <!-- 抖音销量 -->
        <van-cell :title="title" class="screen">
          <template>
            <div class="radio_wrap">
              <!-- 日周月 榜单 -->
              <div
                class="sele"
                :class="[radio_value == item ? 'radio_item_blue' : '']"
                v-for="(item, index) in radio_values"
                :key="'radio_group' + index"
                @click="
                  now_radio_value = item;
                  $emit('returnBack', now_radio_value);
                "
              >
                {{ item }}
              </div>
            </div>
          </template>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "radio_group",
  props: ["radio_values", "radio_value", "title", "tit"],
  data() {
    return {
      now_radio_value: this.radio_value,
    };
  },
  computed: {},
  created: function () {
    this.$watch("radio_value", function (newValue, oldValue) {
      this.$refs.ref1.toggle();
      this.now_radio_value = this.radio_value;
    });
  },
  mounted() {},
  watch: {},
  model: {
    prop: "radio_value",
    event: "returnBack",
  },
  methods: {},
  components: {},
};
</script>

<style scoped lang="less">
#screen{
width: 0.5rem;
position: relative;
// left: -0.13rem;
overflow: hidden;
}

.radio_item_blue {
  color: #fff !important;

  background-color: #fd7f2c !important;
}
.sele {
  // width: 1.386667rem;
  height: .826667rem;
  line-height: .826667rem;
  padding-left: 0.36rem;
  padding-right: 0.36rem;
  border: 1px solid #e5e5e5;
  text-align: center;
  border-radius: 0.133333rem;
  color: #666666;
  background: #f5f5f5;
  display: inline-block;
  margin-right: 0.266667rem;
  margin-bottom: 0.226667rem;
}
</style>
